<template>
  <div class="pay">
    <div class="pay-first">
      <div class="first-title" style="color: #0070ba; font-size: 20px">
        ANBIO BIOTECHNOLOGY
      </div>
      <div class="first-title">All Transactions</div>
      <div class="first-price">
        <div class="container">
          <!--          <div class="box-left">
            <img src="../../assets/activity.png" alt="" style="width: 100px" />
          </div>-->
          <div class="box-right">
            <div class="box-right-top price-text">Recent activity</div>
          </div>
        </div>
      </div>
      <div class="context">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            background: '#faf8f5',
            color: '#0060df',
          }"
        >
          <el-table-column
            prop="sdate"
            style="text-align: center"
            label="Date"
            width="200"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="operation"
            style="text-align: center"
            label="Operation"
            align="center"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.operation == 1" style="color: green">
                Payment from
              </div>
              <div v-if="scope.row.operation == 0" style="color: dodgerblue">
                Pay to
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="account" label="Account" align="center">
            <template slot-scope="scope">
              <div style="color: black; font-size: 16px">
                {{ scope.row.account }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="status" label="Status" align="center" >
            <template slot-scope="scope">
              <div v-if="scope.row.operation == 1">
                <div style="color: green">Received</div>
              </div>
              <div v-if="scope.row.operation == 0">
                <div style="color: dodgerblue">Paid</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="Amount"  align="center">
            <template slot-scope="scope">
              <div class="amount-block">
                <div
                  style="color: black; font-size: 16px"
                  v-if="scope.row.operation == 1"
                >
                  +${{ formatNumber(scope.row.amount) }}&nbsp;USD
                </div>
                <div
                  style="color: black; font-size: 16px"
                  v-if="scope.row.operation == 0"
                >
                  -${{ scope.row.amount }}&nbsp;USD
                </div>
              </div>
            </template>
          </el-table-column>
          <template slot="empty">
            <div class="empty-block">
              <div class="empty-block-text">No Data</div>
            </div>
          </template>
        </el-table>
        <div class="view" @click="viewAll" v-if="Vshow">View all</div>
        <div class="view" @click="recently" v-if="!Vshow">recently</div>
      </div>
    </div>
  </div>
</template>

<script>
import { cachTansactions, cashPayouts } from "@/api";

export default {
  data() {
    return {
      payShow: false,
      Vshow: true,
      tableData: [],
      current: 1,
      pageSize: 10,
    };
  },
  mounted() {
    let param = {};
    param.pageNo = this.current;
    param.pageSize = this.pageSize;
    this.cachTansactions(param);
  },
  methods: {
    cachTansactions(params) {
      params.column = "sdate";
      params.order = "desc";
      cachTansactions(params).then((res) => {
        if (res.success == true) {
          for (let i = 0; i < res.result.records.length; i++) {
            res.result.records[i].sdate = this.formatDate(
              res.result.records[i].sdate
            );
          }
          this.tableData = res.result.records;
        }
      });
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
      const day = date.getDate();
      const year = date.getFullYear();
      // 使用两位数字表示月份和日期
      return `${month.toString().padStart(2, "0")}/${day
        .toString()
        .padStart(2, "0")}/${year}`;
    },
    formatNumber(number) {
      return number.toFixed(2);
    },
    viewAll() {
      let param = {};
      param.pageNo = 1;
      param.pageSize = 1000;
      this.Vshow = false;
      this.cachTansactions(param);
    },
    recently() {
      let param = {};
      param.pageNo = 1;
      param.pageSize = 10;
      this.Vshow = true;
      this.cachTansactions(param);
    },
  },
};
</script>

<style lang="less" scoped>
.pay {
  min-height: calc(100vh - 70px);
  background: #fff;

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .pay-first {
    .first-title {
      padding: 40px 200px 0;
      box-sizing: border-box;
      font-size: 18px;
      font-weight: 500;
      text-align: left;
    }

    .first-price {
      background: #faf8f5;
      padding: 40px 40px 40px 200px;
      box-sizing: border-box;
      margin-top: 40px;
      text-align: left;

      .price-text {
        font-weight: 600;
        font-size: 24px;
        //letter-spacing: 1px;
      }

      .price-title {
        margin-top: 5px;
        //color: #000;
        font-size: 14px;
        font-weight: lighter;
      }
    }

    /* 外层容器样式，使用flex布局 */
    .container {
      display: flex;
      height: 100px;
      width: 300px;
      justify-content: space-between;
      align-items: flex-start;
    }

    /* 左边的盒子样式 */
    .box-left {
      width: 100px;
      height: 100px;
    }

    /* 右边盒子的共同样式 */
    .box-right {
      display: flex;
      flex-direction: column;
      width: 200px;
    }

    /* 右边靠上的盒子样式 */
    .box-right-top {
      height: 50px;
      line-height: 60px;
    }

    /* 右边靠下的盒子样式 */
    .box-right-bottom {
      height: 40px;
    }

    /* 所有盒子的通用样式 */
    .box {
      padding: 10px;
      margin: 10px;
    }

    .view {
      cursor: pointer; /* 设置鼠标指针样式为手型 */
      transition: all 0.3s ease;
      color: #0060df;
      margin-top: 20px;
    }

    .context {
      padding: 0px 200px 40px 200px;
      box-sizing: border-box;
      margin-top: 40px;
      text-align: left;
    }

    .amount-block {
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: center;

      div {
        padding-left: 12%;
        box-sizing: border-box;
        min-width: 200px;
        text-align: left;
      }
    }
  }
}
</style>
